<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="container">
		<!-- :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging 
			v-if="firstLoaded || isCurrentPage" 
			ref="paging" 
			v-model="dataList" 
			@query="queryList" 
			:fixed="false"
		>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view v-if="tabIndex === 0" class="attention-con">
				<rowCon :dataList="dataList" :isOnePage="isOnePage"></rowCon>
			</view>
			<view v-if="tabIndex === 1" class="attention-con">
				<view class="user-item" v-for="(item,index) in dataList" :key="item.shopId">
					<view class="user-left">
						<image :src="item.avatarUrl"/>
						<view>
							<text>{{item.nickName}}</text>
							<text>他关注你了，期待你的回关</text>
						</view>
					</view>
					<view class="user-right">已关注</view>
					<view class="user-right to-attention">关注他</view>
				</view>
			</view>
			<view v-if="tabIndex === 2" class="attention-con shop-list">
				<view class="shop-item" v-for="item in dataList" :key="item.id">
					<image :src="item.coverPic"/>
					<view>当季新款</view>
					<text>{{ item.name }}</text>
					<text>¥{{ functions.formatDollar(item.salePrice) }}</text>
				</view>

			</view>
			<view v-if="tabIndex === 3" class="attention-con">
				用户
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref, watch,reactive,defineExpose } from 'vue';
	import request from '/http/request.js';
	import { collectionUserList } from '/api/user.js'
	import { articleList } from '/api/posting.js'
	import { goodsList } from '/api/shop.js'
	import {useSwiperItem} from '@/composables/swiperItem.js'
	import functions from '@/utils/functions.js'
	
	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		searchVal: {
			type:String
		}
	});
	const {paging,dataList,firstLoaded,isCurrentPage} = useSwiperItem(props)

	const isOnePage = ref(true)

	const queryList = (pageNo, pageSize) => {
		if(pageNo == 1){
			isOnePage.value = true
		}else{
			isOnePage.value = false
		}
		const datas = {
			page: pageNo,
			pageSize: pageSize,
			searchCondition: props.searchVal
		};

		if(props.tabIndex === 0){
			articleList(datas).then(res => {
				console.log('搜索帖子',res);
				paging.value.complete(res.list);
				firstLoaded.value = true;
			}).catch(res => {
				paging.value.complete(false);
			})
		}else if(props.tabIndex === 1){
			collectionUserList(datas).then(res => {
				console.log('搜索用户',res);
				paging.value.complete(res.list);
				firstLoaded.value = true;
			}).catch(res => {
				paging.value.complete(false);
			})
		}else if(props.tabIndex === 2){
			goodsList(datas).then(res => {
				console.log('搜索商品',res);
				paging.value.complete(res.list);
				firstLoaded.value = true;
			}).catch(res => {
				paging.value.complete(false);
			})
		}else if(props.tabIndex === 3){
			console.log('搜索品牌');
		}else if(props.tabIndex === 4){
			console.log('搜索图鉴');
		}

	};

	//刷新数据
	const refresh = () => {
		console.log('调用refresh',props.tabIndex)
		setTimeout(() => {
			paging.value?.refresh()
		},0)
		
	}

	defineExpose({
		refresh
	});

</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.container {
		height: 100%;
	}

	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.attention-con{
		width: 750rpx;
		.user-item{
			width: 750rpx;
			height: 136rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: white;
			@include flex(row,space-between);
			.user-left{
				width: 580rpx;
				height: 100%;
				@include flex(row,flex-start);
				image{
					width: 76rpx;
					height: 76rpx;
					border-radius: 38rpx;
					margin-right: 16rpx;
				}
				view{
					flex: 1;
					height: 100%;
					@include flex(column,space-between,flex-start);
					text:nth-of-type(1){
						font-weight: 600;
						font-size: 30rpx;
						color: #111111;
					}
					text:nth-of-type(2){
						font-weight: 400;
						font-size: 22rpx;
						color: #A9A7B3;
					}
				}
				view.offline-store{
					@include flex(row,flex-start);
				}
			}
			.user-right{
				width: 104rpx;
				height: 48rpx;
				border-radius: 24rpx;
				border: 2rpx solid #ADADAD;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				box-sizing: border-box;
				line-height: 48rpx;
				text-align: center;
			}
			.to-attention{
				background: #16DFF2;
				color: white;
				border: none;
			}
			.take-stroll{
				border: 2rpx solid #16DFF2;
				color: #16DFF2;
			}
		}
	}

	.shop-list{
		@include flex(row,space-between,flex-start,wrap);
		.shop-item{
			width: 374rpx;
			height: 432rpx;
			background: linear-gradient( 164deg, #FFFFFF 0%, #F8F8F8 100%);
			margin-bottom: 2rpx;
			@include flex(column,flex-start,flex-start);
			image{
				width: 375rpx;
				height: 276rpx;
			}
			view{
				width: 100rpx;
				height: 30rpx;
				border: 1rpx solid #FE485B;
				font-weight: 400;
				font-size: 22rpx;
				color: #FE475B;
				text-align: center;
				line-height: 30rpx;
				margin-top: 16rpx;
				margin-left: 30rpx;
			}
			text:nth-of-type(1){
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				padding: 0 20rpx 0 30rpx;
				margin: 10rpx 0 20rpx 0;
				@extend %text-overflow;
			}
			text:nth-of-type(2){
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 22rpx;
				color: #111111;
				padding-left: 30rpx;
			}
		}
	}
</style>